﻿@{
    Layout = "~/Views/Shared/_FormGray.cshtml";
}

<div class="wrapper wrapper-content animated fadeIn">
    <div class="row">
        <div class="col-sm-6">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a data-toggle="tab" href="#tab-1" aria-expanded="true"> 第一个选项卡</a>
                    </li>
                    <li class="">
                        <a data-toggle="tab" href="#tab-2" aria-expanded="false">第二个选项卡</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div id="tab-1" class="tab-pane active">
                        <div class="panel-body">
                            <strong>HTML5 文档类型</strong>
                            <p>Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。</p>
                        </div>
                    </div>
                    <div id="tab-2" class="tab-pane">
                        <div class="panel-body">
                            <strong>移动设备优先</strong>
                            <p>在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。</p>
                        </div>
                    </div>
                </div>


            </div>
        </div>

        <div class="col-sm-6">
            <div class="panel blank-panel">

                <div class="panel-heading">
                    <div class="panel-title m-b-md">
                        <h4>图标选项卡</h4>
                    </div>
                    <div class="panel-options">

                        <ul class="nav nav-tabs">
                            <li class="active">
                                <a data-toggle="tab" href="tabs_panels.html#tab-4"><i class="fa fa-laptop"></i></a>
                            </li>
                            <li class="">
                                <a data-toggle="tab" href="tabs_panels.html#tab-5"><i class="fa fa-desktop"></i></a>
                            </li>
                            <li class="">
                                <a data-toggle="tab" href="tabs_panels.html#tab-6"><i class="fa fa-signal"></i></a>
                            </li>
                            <li class="">
                                <a data-toggle="tab" href="tabs_panels.html#tab-7"><i class="fa fa-bar-chart-o"></i></a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="panel-body">
                    <div class="tab-content">
                        <div id="tab-4" class="tab-pane active">
                            <strong>排版与链接</strong>

                            <p>Bootstrap 排版、链接样式设置了基本的全局样式。分别是： 为 body 元素设置 background-color: #fff; 使用 @@font-family-base、@@font-size-base 和 @@line-height-base a变量作为排版的基本参数 为所有链接设置了基本颜色 @@link-color ，并且当链接处于 :hover 状态时才添加下划线 这些样式都能在 scaffolding.less 文件中找到对应的源码。</p>
                        </div>

                        <div id="tab-5" class="tab-pane">
                            <strong>Normalize.css</strong>

                            <p>为了增强跨浏览器表现的一致性，我们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。</p>
                        </div>
                        <div id="tab-6" class="tab-pane">
                            <strong>布局容器</strong>

                            <p>Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。</p>
                        </div>
                        <div id="tab-7" class="tab-pane">
                            <strong>栅格系统</strong>

                            <p>Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。</p>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
    <div class="row m-b-lg">
        <div class="col-sm-6">
            <div class="tabs-container">

                <div class="tabs-left">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a data-toggle="tab" href="#tab-8"> 第一个选项卡</a>
                        </li>
                        <li class="">
                            <a data-toggle="tab" href="#tab-9"> 第二个选项卡</a>
                        </li>
                    </ul>
                    <div class="tab-content ">
                        <div id="tab-8" class="tab-pane active">
                            <div class="panel-body">
                                <strong>排版与链接</strong>

                                <p>Bootstrap 排版、链接样式设置了基本的全局样式。分别是： 为 body 元素设置 background-color: #fff; 使用 @@font-family-base、@@font-size-base 和 @@line-height-base a变量作为排版的基本参数 为所有链接设置了基本颜色 @@link-color ，并且当链接处于 :hover 状态时才添加下划线 这些样式都能在 scaffolding.less 文件中找到对应的源码。</p>
                            </div>
                        </div>
                        <div id="tab-9" class="tab-pane">
                            <div class="panel-body">
                                <strong>栅格系统</strong>

                                <p>Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。</p>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
        <div class="col-sm-6">
            <div class="tabs-container">
                <div class="tabs-right">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a data-toggle="tab" href="#tab-10">第一个选项卡</a>
                        </li>
                        <li class="">
                            <a data-toggle="tab" href="#tab-11"> 第二个选项卡</a>
                        </li>
                    </ul>
                    <div class="tab-content ">
                        <div id="tab-10" class="tab-pane active">
                            <div class="panel-body">
                                <strong>排版与链接</strong>

                                <p>Bootstrap 排版、链接样式设置了基本的全局样式。分别是： 为 body 元素设置 background-color: #fff; 使用 @@font-family-base、@@font-size-base 和 @@line-height-base a变量作为排版的基本参数 为所有链接设置了基本颜色 @@link-color ，并且当链接处于 :hover 状态时才添加下划线 这些样式都能在 scaffolding.less 文件中找到对应的源码。</p>
                            </div>
                        </div>
                        <div id="tab-11" class="tab-pane">
                            <div class="panel-body">
                                <strong>栅格系统</strong>

                                <p>Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。</p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>